<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script th:src="@{/echarts/echarts.min.js}"></script>
    <script th:src="@{/echarts/china.js}"></script>
    <script th:src="@{/echarts/jquery-1.11.1.min.js}"></script>
    <script th:src="@{https://oisanjavax.github.io/echarts-wordcloud/dist/echarts-wordcloud.min.js}"></script>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
    <script th:src="@{/layui/layui.js}" charset="utf-8"></script>
</head>
<body class="childrenBody">

<div>
    <!-- 内容主体区域 -->
    <div style="padding: 15px;">
        <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
        <div id="main" style="width: 700px;height:500px;float: left"></div> <div id="ciyun" style= "width:400px;height:500px;float: right"></div>
    </div>
</div>
<script type="text/javascript">

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    var option = {
        title: {
            text: '疫情直线图',
            textStyle: {
                fontSize: 30
            },
            x: 'center'
        },
        tooltip: {
            show: true,
            trigger: 'item',
        },
        xAxis: {
            type: 'value',
            scale: true,
            position: 'top',
            splitNumber: 1,
            boundaryGap: false,
            splitLine: {
                show: false
            },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                margin: 2,
                textStyle: {
                    color: '#aaa'
                }
            }
        },
        yAxis: {
            type: 'category',
            nameGap: 16,
            axisLine: {
                show: false,
                lineStyle: {
                    color: '#ddd'
                }
            },
            axisTick: {
                show: false,
                lineStyle: {
                    color: '#ddd'
                }
            },
            axisLabel: {
                interval: 0,
                textStyle: {
                    color: '#999'
                }
            },
            data: []
        },
        series: [{
            name: '确诊数',
            type: 'bar',
            roam: false,
            visualMap: false,
            zlevel: 2,
            barMaxWidth: 20,
            itemStyle: {
                normal: {
                    color: '#40a9ed'
                },
                emphasis: {
                    color: "#3596c0"
                }
            },
            label: {
                normal: {
                    show: false,
                    position: 'right',
                    offset: [0, 10]
                },
                emphasis: {
                    show: true,
                    position: 'right',
                    offset: [10, 0]
                }
            },
            data: []
        }]
    };

    $.ajax({
            url: "/index/queryBar",
            dataType: "json",
            success: function (data) {
                myChart.setOption({

                        yAxis: {
                            data: data.cities
                        },
                    series: [{
                        data: data.vals
                    }]
                });
            }
        });

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

</script>
<script type="text/javascript">
    var Chart = echarts.init(document.getElementById('ciyun'));
    var hotlist = [];

    var wordcloud_car_color =["#60ACFC", "#61D7D3", "#AEE498", "#32D3EB", "#999999"];

    ciyunoption = {

        title:{
            show: true,
            text: "重点疫情省份",
            textStyle: {
                color: '#666666',
                fontSize: 14
            }
        },
        tooltip:{
            trigger: "item"
        },
        toolbox: {
            show: true,
            feature: {
                dataView: {
                    show: true
                },
                restore: {
                    show: true
                }
            }
        },
    };

    $.ajax({
        url: "/index/query",
        dataType: "json",
        success:function (data){
            for (let i in data){
                hotlist[i] = data[i];
            }Chart.setOption({
                series: [ {
                    type: 'wordCloud',
                    sizeRange: [10, 80],
                    rotationRange: [-90, 90],
                    rotationStep: 90,
                    gridSize: 2,

                    // The shape of the "cloud" to draw. Can be any polar equation represented as a
                    // callback function, or a keyword present. Available presents are circle (default),
                    // cardioid (apple or heart shape curve, the most known polar equation), diamond (
                    // alias of square), triangle-forward, triangle, (alias of triangle-upright, pentagon, and star.
                    shape: 'square',

                    //maskImage: maskImage,
                    left: 'center',
                    top: 'center',
                    //width: '60%',
                    //height: '80%',
                    //right: null,
                    //bottom: null,
                    drawOutOfBound: false,
                    textStyle: {
                        normal: {
                            //color: '#60ACFC',
                            color: function () {
                                // 随机从颜色序列中取色
                                var index = Math.floor((Math.random()*wordcloud_car_color.length));
                                //console.log('index:'+index);
                                //console.log('colorOrder:'+colorOrder[index]);
                                return wordcloud_car_color[index];
                            }
                        },
                        emphasis: {
                            color: '#60ACFC',
                            shadowBlur: 6,
                            shadowColor: '#dddddd'
                        }
                    },
                    data: hotlist.sort(function (a, b) {
                        return b.value  - a.value;
                    })
                } ]
            })
        }
    })
    Chart.setOption(ciyunoption);
</script>
</body>
</html>

